<script lang="ts" setup>
import { useRouter } from 'vue-router';

const props = defineProps<{
  sku: ProductSku;
}>();

const router = useRouter();

const viewDetail = () => {
  router.push(`/mall/${props.sku.spuId}`)
}
</script>

<template>
  <div class="flex gap-2" @click="viewDetail">
    <nut-image
      class="shrink-0 w-20 h-20 rd-md of-hidden"
      :src="sku?.picUrl"
      fit="cover"
      show-loading
    />
    <div class="grow flex flex-col justify-between">
      <div class="flex items-center justify-between">
        <h3 class="w-36 truncate">{{ sku?.skuName }}</h3>
        <span class="text-sm"
          >￥<span class="text-lg">{{ sku?.price / 100 }}</span></span
        >
      </div>
      <!-- <p class="c-gray-4">共 {{ 19 }} 节</p> -->
      <p class="flex flex-wrap gap-2">
        <nut-tag color="#999999" textColor="#999999" plain>永久有效</nut-tag>
      </p>
    </div>
  </div>
</template>
